<template>
  <div class="popular-activities-list">
    <t-loading :loading="loading">
      <div v-if="!loading && !data.length" class="empty-data">
        <t-empty description="暂无数据" />
      </div>
      <t-list v-else class="activity-list">
        <t-list-item v-for="(item, index) in data" :key="item.id">
          <template #content>
            <div class="activity-item">
              <div class="activity-rank">
                <t-tag theme="primary" :class="getRankClass(index)">{{ index + 1 }}</t-tag>
              </div>
              <div class="activity-info">
                <div class="activity-title">{{ item.title }}</div>
                <div class="activity-meta">
                  <t-tag theme="default" variant="light" size="small">{{ item.category }}</t-tag>
                  <span class="activity-time">{{ formatDate(item.startTime) }}</span>
                </div>
              </div>
              <div class="activity-stats">
                <div class="activity-progress">
                  <t-progress
                    :percentage="getPercentage(item.signupCount, item.maxParticipants)"
                    :color="getProgressColor(item.signupCount, item.maxParticipants)"
                    :label="false"
                    size="small"
                  />
                </div>
                <div class="activity-count">{{ item.signupCount }}/{{ item.maxParticipants }}</div>
              </div>
            </div>
          </template>
        </t-list-item>
      </t-list>
    </t-loading>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { PopularActivity } from '../../../api/statistics'

const props = defineProps<{
  data: PopularActivity[]
  loading: boolean
}>()

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 获取进度百分比
const getPercentage = (signupCount: number, maxParticipants: number) => {
  if (maxParticipants === 0) return 0
  return Math.round((signupCount / maxParticipants) * 100)
}

// 获取进度条颜色
const getProgressColor = (signupCount: number, maxParticipants: number) => {
  const percentage = getPercentage(signupCount, maxParticipants)
  if (percentage >= 90) return '#E34D59' // 接近满员，红色
  if (percentage >= 70) return '#ED7B2F' // 超过70%，橙色
  return '#0052D9' // 默认蓝色
}

// 获取排名标签样式
const getRankClass = (index: number) => {
  if (index === 0) return 'rank-first'
  if (index === 1) return 'rank-second'
  if (index === 2) return 'rank-third'
  return 'rank-other'
}
</script>

<style scoped>
.popular-activities-list {
  width: 100%;
  height: 100%;
  position: relative;
}

.empty-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.activity-list {
  max-height: 350px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 0;
}

.activity-rank {
  margin-right: 16px;
  width: 32px;
}

.activity-info {
  flex: 1;
  min-width: 0;
}

.activity-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
}

.activity-stats {
  margin-left: 16px;
  width: 100px;
  text-align: right;
}

.activity-progress {
  margin-bottom: 4px;
}

.activity-count {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}

.rank-first {
  background-color: #E8B341 !important;
  border-color: #E8B341 !important;
}

.rank-second {
  background-color: #B2BDCC !important;
  border-color: #B2BDCC !important;
}

.rank-third {
  background-color: #D19C66 !important;
  border-color: #D19C66 !important;
}

.rank-other {
  background-color: #0052D9 !important;
  border-color: #0052D9 !important;
}
</style> 